<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<title>娱管家</title>  
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="">
	<meta http-equiv="content-security-policy">
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!--mui样式-->
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/app.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/mui.picker.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/mui.picker.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/mui.poppicker.css"/>
	<!--环信-->
	<script type="text/javascript" src="js/hx/strophe.js" ></script>
	<script type="text/javascript" src="js/hx/websdk-1.1.2.js"></script>
	<script type="text/javascript" src="js/hx/websdk.config.js"></script>
	<script type="text/javascript" src="js/hx/websdk.shim.js"></script> 
	<script type="text/javascript" src="js/bq.js"></script> 
	<!--环信-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yWnFso0oyjmX79HzCx1DRz2sBtvweQfI"></script>
	<link rel="stylesheet" href="css/loding/fakeLoader.css"/>
	<!--头像上传-->
	<link rel="stylesheet" href="css/cropper.css"/>
	<script src="js/cropper.js"></script>
	<!-- 公共样式与字体  -->
	<link rel="stylesheet" href="css/public.css"/>
	<link rel="stylesheet" type="text/css" href="icon-font/iconfont.css"/>
	<!-- 定制样式   -->
	<link rel="stylesheet" href="css/style.css"/>
	<link rel="stylesheet" href="css/bq.css" />
	<link rel="stylesheet" type="text/css" href="css/NewStyle.css"/>
	<!-- Swiper 样式  -->
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	<link rel="stylesheet" href="css/appstyle.css" />

	<!-- 微信分享 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<style>
		body *{ background-color: #fff; }
	</style>
</head>
<body>
	<div class="App">
		<span style="background-color: #eee;">娱管家</span>
		<button>下载APP</button>
	</div>
	<div class="pHead mui-navbar-inner mui-bar mui-bar-nav header_1" style='border-bottom: 1px solid #c9c9c9;'>
		<h2 style="padding: 0;">排行榜</h2>
	</div>
	<main class="mui-page-content pBody rankPage_main">
		<div class="rankPage_con">
			<ul>
				<li>
					<div class="rank_pic"></div>
					<div class="rank_head"></div>
					<div class="rank_text">
						<p>某某某</p>
						<p>123456789</p>
					</div>
					<div class="rank_icon"></div>
					<div class="rank_num"><span>888</span>个</div>
				</li>
				<li>
					<div class="rank_pic"></div>
					<div class="rank_head"></div>
					<div class="rank_text">
						<p>某某某</p>
						<p>123456789</p>
					</div>
					<div class="rank_icon"></div>
					<div class="rank_num"><span>888</span>个</div>
				</li>
				<li>
					<div class="rank_pic"></div>
					<div class="rank_head"></div>
					<div class="rank_text">
						<p>某某某</p>
						<p>123456789</p>
					</div>
					<div class="rank_icon"></div>
					<div class="rank_num"><span>888</span>个</div>
				</li>
				<li>
					<div class="rank_pic">4</div>
					<div class="rank_head"></div>
					<div class="rank_text">
						<p>某某某</p>
						<p>123456789</p>
					</div>
					<div class="rank_icon"></div>
					<div class="rank_num"><span>888</span>个</div>
				</li>
			</ul>
		</div>
	</main>
	<div class="" id="tan2"></div>
	<script src="js/muijs/mui.min.js"></script>
	<script src="js/muijs/mui.picker.min.js"></script>
	<script src="js/muijs/mui.poppicker.js"></script>
	<script src="js/base.js"></script>
	<script src="js/swiper.min.js"></script>
	<script type="text/javascript">
		var share_link = location.href;
		var share_data = {
	        title: '娱管家',// 设置分享标题
	        desc: '',// 设置分享描述
	        link: share_link,// 设置分享链接
	        img: ''// 分享图片
	    };
	    var token = GetQueryString('token');
		$.ajax({
	   		url: 'http://www.yuzhuli.com/api.php/member/my_offline_rank',
	   		type: 'POST',
	   		dataType: 'json',
	   		data: {token:token},
	   		success:function(res){
	   			if(res.s){
					share_data.title = res.user.nickname;
				    share_data.desc = res.user.member_no;
				    share_data.img = res.user.img;
				    getWxConfig(ApiList, wxConfigCallback, false);
	   			}
	   		}
	   	})
		$('.App button').unbind('click').on('click',function(){
			location.href = 'http://www.yuzhuli.com/Share/erweima.html?id='+token;
		});
		$('.rankPage_con ul').attr('page',1);
		$('.rankPage_con ul').empty();
		dataFn('.rankPage_con ul',function(){});
		scrollFn('.rankPage_con ul');
		function scrollFn(dom){
			var _judge = true;
			$(dom).unbind('scroll').bind('scroll',function(){
				var $this = $(this),
					viewH = $(this).height(), //可见高度
					contentH = $(this).get(0).scrollHeight, //内容高度
					scrollTop = $(this).scrollTop(); //滚动高度
				if(scrollTop / (contentH - viewH) >= 0.95) { //到达底部100px时,加载新内容
					if(_judge){
						_judge = false;
						dataFn(dom,function(i){if(i){ _judge = true; }else{ mui.toast('暂无更多数据！'); }})
					}
				}
			})
		}
		function dataFn(dom,fn){
			var page = $(dom).attr('page');
			var html = '';
			$.ajax({
		   		url: 'http://www.yuzhuli.com/api.php/member/offline_rank',
		   		type: 'POST',
		   		dataType: 'json',
		   		data: {page:page,size:50},
		   		success:function(res){
		   			if(res.list.length==0){ fn(false); return; };
					var html = '';
					$.each(res.list, function(i,d) {						
						html+='<li>';
						if(page==1&&i<=2){
							html+='    <div class="rank_pic"></div>';
						}else{
							html+='    <div class="rank_pic">'+((page-1)*50+(i+1))+'</div>';
						}
						html+='    <div class="rank_head"  style="background-image:url('+d.img+')"></div>';
						html+='    <div class="rank_text">';
						html+='        <p>'+d.nickname+'</p>';
						html+='        <p>'+d.member_no+'</p>';
						html+='    </div>';
						html+='    <div class="rank_icon" style="background-image:url('+d.level_img+')"></div>';
						html+='    <div class="rank_num"><span>'+d.offline_num+'</span>个</div>';
						html+='</li>';
					});
					$(dom).append(html);
					var _p = Number(page) + 1;
					$(dom).attr('page',_p);
					fn(true);
		   		}
		   	})
		}
		
		
	    function GetQueryString(name){
		    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		    var r = window.location.search.substr(1).match(reg);
		    if(r!=null)return  unescape(r[2]); return null;
		}
	     // 分享
	    function getWxConfig(ApiList, callback, debug) {    		
	        $.ajax({
	            url: 'http://www.yuzhuli.com/api.php/api/wechat_js_config',
	            type: 'POST',
	            dataType: 'json',
	            data: {url: location.href,apis:ApiList,debug:debug},
	        }).done(function (res) {
	        	console.log(res);
	            if (res.s) {
	                var con = res.config;
	                var wxConf = {
	                    debug: debug,
	                    appId: con.appId,
	                    timestamp: con.timestamp,
	                    nonceStr: con.nonceStr,
	                    signature: con.signature,
	                    jsApiList: ApiList
	                };
	                wx.config(wxConf);
	                wx.ready(function () {
	                    callback();
	                });
	            }
	        }).fail(function () {
	            console.log("error");
	        }).always(function () {
	            console.log("complete");
	        });
	    }
	    var ApiList = [
	        'onMenuShareTimeline',
	        'onMenuShareAppMessage',
	        'onMenuShareQQ',
	        'onMenuShareQZone',
	        'onMenuShareWeibo',
	    ];	
	    
	    function wx_share(data, callback) {
	        // 分享到朋友圈
	        wx.onMenuShareTimeline({
	            title: data.title, // 分享标题
	            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	            imgUrl: data.img, // 分享图标
	            success: function () {
	                // 用户确认分享后执行的回调函数
	            },
	            cancel: function () {
	                // 用户取消分享后执行的回调函数
	            }
	        });
	        // 分享给朋友
	        wx.onMenuShareAppMessage({
	            title: data.title, // 分享标题
	            desc: data.desc, // 分享描述
	            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	            imgUrl: data.img, // 分享图标
	            type: '', // 分享类型,music、video或link，不填默认为link
	            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
	            success: function () {
	                // 用户确认分享后执行的回调函数
	            },
	            cancel: function () {
	                // 用户取消分享后执行的回调函数
	            }
	        });
	        wx.onMenuShareQQ({
				title: data.title, // 分享标题
				desc: data.desc, // 分享描述
				link: data.link, // 分享链接
				imgUrl: data.img, // 分享图标
				success: function () {
				// 用户确认分享后执行的回调函数
				},
				cancel: function () {
				// 用户取消分享后执行的回调函数
				}
			});
			wx.onMenuShareQZone({
				title: data.title, // 分享标题
				desc: data.desc, // 分享描述
				link: data.link, // 分享链接
				imgUrl: data.img, // 分享图标
				success: function () {
				// 用户确认分享后执行的回调函数
				},
				cancel: function () {
				// 用户取消分享后执行的回调函数
				}
			});
			wx.onMenuShareWeibo({
				title: data.title, // 分享标题
				desc: data.desc, // 分享描述
				link: data.link, // 分享链接
				imgUrl: data.img, // 分享图标
				success: function () {
				// 用户确认分享后执行的回调函数
				},
				cancel: function () {
				// 用户取消分享后执行的回调函数
				}
			});
	    }	
	    var shareCallback = function (type, status) {
			
	    }	
	    var wxConfigCallback = function () {
//	    	$("audio")[0].play();
	        wx_share(share_data, shareCallback);	        
	    }	
	    
	    wx.error(function (res) {
	        console.log(JSON.stringify(res));
	        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	    });
	</script>
</body>
</html>
